<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-09 11:01:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-09 14:07:22
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- div标签内部有多少个子一级节点 分别是什么 -->
    <div class="test" id="box">
        hello
        <p>你好</p>
        world
        <p>千锋</p>
        <!-- 我是注释 -->
    </div>
    <div></div>
    <!-- 文本节点  一个换行+四个空格+hello一个换行+四个空格 -->
    <!-- 元素节点  <p></p> -->
    <!-- 文本节点  一个换行+四个空格 -->
    <!-- 文本节点  world+换行+四个空格 -->
    <!-- 元素节点  <p></p> -->
    <!-- 文本节点  一个换行+四个空格  -->
    <!-- 注释节点  我是注释 -->
    <!-- 文本节点 一个换行 -->
    <script>
        /* 
            dom节点  
            什么是dom节点:
            <p id='hello' class="test">我是内容 <!--我是注释 </p>
            构成页面的部分:
                
                标签 <p></p>
                属性 id='hello' class="test"
                文本 我是内容
                注释 <!--我是注释
            
            上面分成几类

            元素节点  页面的每一个标签 
            属性节点  标签上面你的属性 
                属性节点不能作为独立的节点出现
                    仅仅是写在标签上对标签进行一些描述的行为
                属性节点不和任何节点产生父子关系  

            文本节点 所有书写的文本内容 包含空格和换行  
            注释节点 所有页面上的注释  包含空格和换行 
        
        */
    </script>
</body>
</html>